<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>首页</title>
	<meta name="decorator" content="ani"/>
	<%@ include file="/webpage/include/bootstraptable.jsp"%>
	<link rel="stylesheet" href="${ctxStatic1}/webpage/static/plugins/layui/css/layui.css">
	<style>

		#body-container {
			margin-left: 0px !important;
			margin-top: 0px !important;
			overflow-x: hidden!important;
			transition: all 0.2s ease-in-out !important;
			height: 100% !important;
		}
		.width-5-12{
			width: 20% !important;
		}
		.box {
			/*height: 60px;*/
			/*width: 60px;*/
			width: 20% !important;
			position: relative;
			/*margin: 100px auto;*/
			float: left;
			text-align: center;
			border: 0px;
			background-color: rgba(0,0,0,0)
		}
		.box img {
			width: 100%;
			height: 100%;
			padding: 20px 20px 5px 20px;
		}
		.box h3 {
			font-size: 13px;
		}
		.box .number {
			position: absolute;
			left: 60%;
			top: 10px;
			background-color: red;
			color: #fff;
			line-height: 15px;
			min-width: 15px;
			border-radius: 15px;
			text-align: center;
			font-size: 12px;
		}
		.img1{
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
<div id="body-container" class="wrapper wrapper-content">
	<div style="width: 100%">
		<div class="layui-carousel" id="lb">
			<div carousel-item="">
				<div><img class="img1" src="${ctxStatic}/common/images/a1.jpg"></div>
				<div><img class="img1" src="${ctxStatic}/common/images/a2.jpg"></div>
				<div><img class="img1" src="${ctxStatic}/common/images/a3.jpg"></div>
				<div><img class="img1" src="${ctxStatic}/common/images/a4.png"></div>
			</div>
		</div>
	</div>
	<div style="width: 100%;height:80px;margin-top: 10px;background-color: white">
		<div class="box">
			<img src="${ctxStatic}/common/images/111.png" onclick="jp.openTab('${ctx}/act/task/process','发起流程',false)">
			<h3>发起流程</h3>
		</div>
		<div class="box">
			<img src="${ctxStatic}/common/images/222.jpg" onclick="jp.openTab('${ctx}/act/task/todo','待办任务',false)">
			<span class = "number">${dbCount}</span>
			<h3>待办任务</h3>
		</div>
		<div class="box">
			<img src="${ctxStatic}/common/images/333.png" onclick="jp.openTab('${ctx}/act/task/historic','已办任务',false)">
			<h3>已办任务</h3>
		</div>
		<div class="box">
			<img src="${ctxStatic}/common/images/444.png" onclick="jp.openTab('${ctx}/act/task/myApplyed','我的申请',false)">
			<h3>我的申请</h3>
		</div>
		<div class="box">
			<img src="${ctxStatic}/common/images/555.png" onclick="jp.openTab('${ctx}/act/process/chaosongList','我的抄送',false)">
			<span class = "number">${csCount}</span>
			<h3>我的抄送</h3>
		</div>
	</div>

</div>
<script src="${ctxStatic1}/webpage/static/plugins/layui/layui.js"></script>
<script>
	$(function(){
		layui.use(['carousel','element','layer'], function () {
			var element = layui.element;
			var layer = layui.layer;
			var carousel = layui.carousel;
			//设定各种参数
			carousel.render({
				elem: '#lb',
				width: '100%',
				height: '240px',
				arrow: 'always',
				interval: 2000
			});
		})

		jp.get("${ctx}/getbbList",function (data) {
			for(var key in data){
				var htmlStr = "<div class=\"layui-card\" style=\"margin-top: 10px;\">";
				htmlStr = htmlStr + "<div class=\"layui-card-header\">"+key+"</div>";
				var bbList = data[key];
				var rows = Math.ceil(bbList.length/4);
				htmlStr = htmlStr + "<div class=\"layui-card-body\" style=\"height: "+80*rows+"px\">";
				for(var i = 0; i<bbList.length; i++){
					htmlStr = htmlStr + "<div class=\"box\" style=\"width: 25% !important;\">";
					htmlStr = htmlStr + "<img style=\"padding-top: 0px\" src=\"${ctxStatic}/common/images/"+bbList[i].picture+"\" onclick=\"jp.openTab('${ctx}"+bbList[i].url+"','"+bbList[i].name+"',false)\">";
					htmlStr = htmlStr + "<h3>"+bbList[i].name+"</h3>";
					htmlStr = htmlStr + "</div>";
				}
				htmlStr = htmlStr + "</div>";
				htmlStr = htmlStr + "</div>";
				htmlStr = htmlStr + "</div>";
				$("#body-container").append(htmlStr);
			}

		})
	});
</script>

</body>
</html>